<template>
  <div ref="scrollview" class="home-container">
    <div class="waterfall">
      <WaterFall></WaterFall>
    </div>
  </div>
</template>

<script>
import { getHomeListApi, getTopicHotListApi } from "@/api/home";
import { formatDate } from "@/utils/date";
import WaterFall from "@/components/WaterFall.vue";
export default {
  data() {
    return {
      index: 0,
      userInfo: this.$store.state.userInfo,
      homeList: [],
      topicHotList: [],
      list: [
        {
          id: 1,
          path: "https://tse3-mm.cn.bing.net/th/id/OIP-C.ZkoPhpKfJwsvGmpm8RsragHaFp?pid=ImgDet&rs=1",
        },
        {
          id: 2,
          path: "https://tse1-mm.cn.bing.net/th/id/OIP-C.B_4ofy-HapzxaVS7UhMxCQHaNK?pid=ImgDet&rs=1",
        },
        {
          id: 3,
          path: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M07/06/05/Cg-4y1TcgwGIcCW6ADOtF-oxuF8AAUn6wNDA_AAM60v722.jpg",
        },
        {
          id: 4,
          path: "https://img.zcool.cn/community/0104c15cd45b49a80121416816f1ec.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
          id: 5,
          path: "https://b.zol-img.com.cn/sjbizhi/images/11/1080x1920/1592964698813.jpg",
        },
        {
          id: 6,
          path: "https://tse3-mm.cn.bing.net/th/id/OIP-C.duz6S7Fvygrqd6Yj_DcXAQHaF7?pid=ImgDet&rs=1",
        },
        {
          id: 7,
          path: "https://img.zcool.cn/community/01d89d556899f60000012716e4364f.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
          id: 8,
          path: "https://tse3-mm.cn.bing.net/th/id/OIP-C.ZkoPhpKfJwsvGmpm8RsragHaFp?pid=ImgDet&rs=1",
        },
        {
          id: 9,
          path: "https://img.zcool.cn/community/01d89d556899f60000012716e4364f.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
          id: 7,
          path: "https://img.zcool.cn/community/01d89d556899f60000012716e4364f.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
          id: 8,
          path: "https://tse3-mm.cn.bing.net/th/id/OIP-C.ZkoPhpKfJwsvGmpm8RsragHaFp?pid=ImgDet&rs=1",
        },
        {
          id: 9,
          path: "https://img.zcool.cn/community/01d89d556899f60000012716e4364f.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
          id: 7,
          path: "https://img.zcool.cn/community/01d89d556899f60000012716e4364f.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
          id: 8,
          path: "https://tse3-mm.cn.bing.net/th/id/OIP-C.ZkoPhpKfJwsvGmpm8RsragHaFp?pid=ImgDet&rs=1",
        },
        {
          id: 9,
          path: "https://img.zcool.cn/community/01d89d556899f60000012716e4364f.jpg@1280w_1l_2o_100sh.jpg",
        },
      ],
      list2: [
        {
          id: 1,
          path: "https://tse3-mm.cn.bing.net/th/id/OIP-C.ZkoPhpKfJwsvGmpm8RsragHaFp?pid=ImgDet&rs=1",
        },
        {
          id: 2,
          path: "https://tse1-mm.cn.bing.net/th/id/OIP-C.B_4ofy-HapzxaVS7UhMxCQHaNK?pid=ImgDet&rs=1",
        },
        {
          id: 3,
          path: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M07/06/05/Cg-4y1TcgwGIcCW6ADOtF-oxuF8AAUn6wNDA_AAM60v722.jpg",
        },
        {
          id: 4,
          path: "https://img.zcool.cn/community/0104c15cd45b49a80121416816f1ec.jpg@1280w_1l_2o_100sh.jpg",
        },
      ],
    };
  },
  components: {
    WaterFall,
  },
  filters: {
    filterNumber(arg) {
      if (arg.toString().length > 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(0);
        return realVal + "w";
      } else {
        return arg;
      }
    },
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      // let date = new Date(time);
      var data = new Date(time);
      var dateTimeStamp = data.getTime();
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      // var week = day * 7;
      // var month = day * 30;
      // var year = month * 12;
      var now = new Date().getTime(); //获取当前时间毫秒
      var diffValue = now - dateTimeStamp; //时间差

      var result = "";
      if (diffValue < 0) {
        result = "" + "未来";
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      // var weekC = diffValue / week;
      // var monthC = diffValue / month;
      // var yearC = diffValue / year;

      if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        return formatDate(data, "yyyy年MM月dd日");
      }
      return result;
      // return formatDate(date, "yyyy-MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
    filterDotNumber(arg) {
      if (arg.toString().length > 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(1);
        return realVal + "w";
      } else {
        return arg;
      }
    },
    formatSec(time) {
      const min =
        parseInt((time % 3600) / 60) < 10
          ? "0" + parseInt((time % 3600) / 60)
          : parseInt((time % 3600) / 60);
      const sec =
        parseInt((time % 3600) % 60) < 10
          ? "0" + parseInt((time % 3600) % 60)
          : parseInt((time % 3600) % 60);
      return min + ":" + sec;
    },
  },
  created() {
    this.getHomeListFun();
    this.getTopicHotListFun();
  },
  mounted() {
    
  },
  destroyed() {},
  mounted() {
    var rightmain = document.querySelector("#rightmain");
    rightmain.style.removeProperty("position");
    rightmain.style.position = "static";
  },
  methods: {
    getHomeFun() {
      // this.getHomeListFun()
    },
    // 简单的节流函数
    throttle(func, wait, mustRun) {
      var timeout,
        startTime = new Date();

      return function () {
        var context = this,
          args = arguments,
          curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= mustRun) {
          func.apply(context, args);
          startTime = curTime;
          // 没达到触发间隔，重新设定定时器
        } else {
          timeout = setTimeout(func, wait);
        }
      };
    },
    fWaterFall() {
      var container = document.getElementById("container");
      // 可视区域的宽度
      var clientWidth = document.documentElement.clientWidth - 157;
      // 获取到页面所有的class为item的元素
      var oItem = document.getElementsByClassName("item");
      // 获取其中一个的item宽度
      console.log(oItem);
      var itemWidth = oItem[0].offsetWidth;
      // 一行多少个
      var num = Math.floor(clientWidth / itemWidth);
      // 设置container的宽度
      container.style.width = num * itemWidth + "px";

      var hrr = [];

      for (var i = 0; i < oItem.length; i++) {
        if (i < num) {
          // 第一排
          hrr.push(oItem[i].offsetHeight);
        } else {
          // 得到高度最小值
          var minHeight = Math.min(...hrr);
          // 得到最小值的索引
          var index = this.fInArray(minHeight, hrr);
          // 设置样式
          oItem[i].style.position = "absolute";
          oItem[i].style.left = index * itemWidth + "px";
          oItem[i].style.top = minHeight + "px";

          hrr[index] = hrr[index] + oItem[i].offsetHeight;
        }
      }
    },
    fInArray(min, hrr) {
      for (var i = 0; i < hrr.length; i++) {
        if (hrr[i] == min) {
          return i;
        }
      }
    },
    fScrollTop() {
      var item = document.getElementsByClassName("item");
      var lastItem = item[item.length - 1];
      var clientHeight = document.documentElement.clientHeight;
      var scrollTop = document.documentElement.scrollTop;
      if (lastItem.offsetTop < clientHeight + scrollTop) {
        return true;
      } else {
        return false;
      }
    },
    scrollChange() {
    },
    getTopicHotListFun() {
      getTopicHotListApi().then((res) => {
        if (res.data.code == 200) {
          this.topicHotList = res.data.data;
        }
      });
    },
    getHomeListFun() {
      var userId = -1;
      if (this.userInfo != null || this.userInfo != undefined) {
        userId = this.userInfo.userId;
      }
      getHomeListApi({
        userId: userId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.homeList.push(...res.data.data);
        }
      });
    },
  },
};
</script>

<style>
.home-container {
  background-color: #161823;
  width: 100%;
  padding: 14px 20px;
  box-sizing: border-box;
}
/* .home-container {
  height: 100%;
  overflow-y: scroll;
  position: sticky; */
/* } */
* {
  margin: 0;
  padding: 0;
}

.g-container {
}

.g-container:after {
  content: "";
  display: block;
  clear: both;
}
.item {
  float: left;
  padding: 15px 0 0 15px;
}
.pic {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 0 5px #ccc;
}
.pic img {
  width: 200px;
  height: auto;
}
</style>
